<template>
    <div id="kind-root">
     <Navbar>商品分类</Navbar>
        <div class="kind-main">
            <div class="kind-main-left" ref="bigdiv">
                <div 
                    v-for="b in bigkind" 
                    @click="kindClick($event,b.bigkind)"
                    @touchstart="touchClick" 
                    @touchmove="categoryMove" 
                    @touchend="categorEnd"
                    :class="{bigitem:bigtext==b.bigkind}"
                >{{b.bigkind}}</div>
            </div>
            <div class="kind-main-right" ref="kindmain">
                <KindItem></KindItem>
            </div>
        </div>
    </div>
</template>

<script>
    import KindItem from '../components/KindItem.vue';
    import Navbar from '../components/Navbar.vue'
    import {
        mapState
    } from 'vuex';

    export default {
        data:function(){
            return {
                bigtext:'热门推荐',
                // 拖动的距离
                dis:'',
                // 大div的高
                top:'',
                //最大拖动距离
                maxDis:'',
            }
        },
        components: {
            KindItem,
            Navbar,
        },
        methods: {
            touchClick: function (e) {
                this.top = this.$refs.bigdiv.offsetTop - 44;
                this.dis = e.touches[0].clientY;
            },
            kindClick: function(e,b) {
                this.bigtext = b;
                // console.log(this.bigtext);
                this.$refs.bigdiv.classList.add("transtion");
                this.top = this.$refs.bigdiv.offsetTop - 44;
                this.maxDis = this.$refs.bigdiv.scrollHeight-this.$refs.bigdiv.clientHeight;
    
                if(e.target.offsetTop<=this.maxDis){
                    this.$refs.bigdiv.style.top=-e.target.offsetTop+"px";
                }else{
                    if(this.maxDis+this.top<e.target.offsetTop+this.top){
                        this.$refs.bigdiv.style.top=-this.maxDis+"px";
                    }
                }

                this.$refs.kindmain.style.opacity = 0;
                // this.$store.commit("setKindName",e.target.innerHTML);
                var param = {
                    bigkind: e.target.innerHTML
                }
                setTimeout(()=> {
                    this.$store.dispatch("requestBigKindItem", param);
                    this.$refs.kindmain.style.opacity = 1;
                }, 400);
            },
            
            categoryMove: function (e) {
                var box = this.$refs.bigdiv;
                box.classList.remove("transtion");
                // console.dir(ul.classList[0]=='');
                var moveDis = e.touches[0].clientY - this.dis;
                box.style.top = moveDis + this.top + "px";
                // console.log(moveDis);
            },
            categorEnd: function (e) {
                //最大拖动距离等于元素内容高度-元素高度
                this.$refs.bigdiv.classList.add("transtion");
                this.maxDis = this.$refs.bigdiv.scrollHeight-this.$refs.bigdiv.clientHeight;
                this.top = this.$refs.bigdiv.offsetTop - 44;
                if (this.top > 0) {
                    this.$refs.bigdiv.style.top = 0;
                }
                if(this.top<-this.maxDis){
                    this.$refs.bigdiv.style.top = -this.maxDis+"px";
                }
                // console.log(this.top)
            }

        },
        mounted: function() {
            // console.log(isActive);
            if (this.pageIn) {
                this.$store.dispatch("requestBigKind");
            }
        },
        computed: {
            ...mapState([
                "bigkind",
                "pageIn",
            ])
        }
    }
</script>

<style scoped>
    .kind-root {
        width: 100%;
        height: calc(100vh - 57px);
        background-color: white;
    }
    
    .kind-main {
        height: calc(100vh - 97px);
        display: flex;
        overflow: hidden;
    }
    
    .kind-main-left {
        position: relative;
        width: 25vw;
        flex-shrink: 0;
        font-size: 13px;
        height: 100%;
        cursor:pointer;
      
    }
    
    .kind-main-left>div {
        width: 100%;
        text-align: center;
        padding: 15px 12px;
        border-bottom: 1px solid #eee;
    }
    
    .kind-main-right {
        height: calc(100vh - 101px);
        padding: 10px 5px;
        padding-top: 7px;
        padding-left: 8px;
        flex-grow: 1;
        background-color:#eeeeee;
        opacity: 1;
        transition: all 0.4s;
    }
    .transtion{
        transition: top 0.7s;
    }
    .bigitem{
        color: red;
        background-color:white;
    }
</style>